<template>
    <div class="fixed inset-0 w-screen h-screen" @click="toggleAnimationVisibility">
        <!-- 全屏动画容器 -->
        <div v-if="currentAnimationIndex === 0 && (animationVisible || isFading)"
            class="absolute inset-0 flex justify-center items-center">
            <!-- <Lottie :animation-data="animationYuan" class="w-full h-full" :class="{ 'fade-out': !animationVisible }" /> -->
            <Lottie :animation-data="animationData" class="w-full h-full" :class="{ 'fade-out': !animationVisible }" />
        </div>
        <div v-if="currentAnimationIndex === 1 && (animationVisible || isFading)"
            class="absolute inset-0 flex justify-center items-center">
            <!-- 第二组动画内容 -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Lottie from '../components/lottie/index.vue';
import { useRouter } from 'vue-router';
// 引入新的动图数据
const router = useRouter();
import Data from '../assets/data.json';
// import yuan from '../assets/冲浪板小人圆环data.json';
// 从 localStorage 中获取初始状态，如果没有则默认为 true
const storedVisibility = localStorage.getItem('animationVisible');
const animationVisible = ref(storedVisibility === null ? true : storedVisibility === 'true');
const isFading = ref(false);
// 控制显示哪一组动图
const currentAnimationIndex = ref(0);

const animationData = {
    ...Data,
    assets: Data.assets.map(asset => ({
        ...asset,
        u: asset.u === "images/" ? "/src/assets/images/" : asset.u
    }))
};

// const animationYuan = {
//     ...yuan,
//     assets: yuan.assets.map(asset => ({
//         ...asset,
//         u: asset.u === "images/" ? "/src/assets/images/" : asset.u
//     }))
// };



const toggleAnimationVisibility = () => {
    router.push({
        path: '/workInfo',
    })
};

// 在组件挂载时从 localStorage 读取状态
onMounted(() => {
    const stored = localStorage.getItem('animationVisible');
    if (stored) {
        animationVisible.value = stored === 'true';
    }
});
</script>

<style scoped>
/* 新增全屏样式 */
.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.w-screen {
    width: 100vw;
}

.h-screen {
    height: 100vh;
}

/* 原有动画样式保持不变 */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-out {
    animation: fadeOut 1s ease forwards;
}

.fade-in {
    animation: fadeIn 1s ease forwards;
}
</style>